<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>英雄列表</title>
    <link rel="stylesheet" href="./css/herolist.css" />
  </head>
  <body>
    <div class="main">
      <div id="app">
        <ul class="tab-types">
          <li class="current"><a href="javascript:;">英雄</a></li>
          <li><a href="javascript:;">局内道具</a></li>
          <li><a href="javascript:;">召唤师技能</a></li>
        </ul>
        <div class="radio-container">
          <div class="types-left">定位</div>
          <div class="types-right">
            <ul class="types-ms"></ul>
            <div class="search">
              <input type="search" placeholder="请输入英雄的名称" />
            </div>
          </div>
        </div>
        <div class="hero-list">
          <ul></ul>
        </div>
      </div>
    </div>
  </body>
  <script src="./js/herolist.js"></script>
  <script>
    var heroTypes = [
      {
        type: 0,
        name: "全部",
      },
      {
        type: 3,
        name: "坦克",
      },
      {
        type: 1,
        name: "战士",
      },
      {
        type: 4,
        name: "刺客",
      },
      {
        type: 2,
        name: "法师",
      },
      {
        type: 5,
        name: "射手",
      },
      {
        type: 6,
        name: "辅助",
      },
    ];

    heroList = heroList.reverse();

    var typesms = document.querySelector(".types-ms");
    var template = "";
    heroTypes.forEach((item) => {
      template += `<li data-type="${item.type}">
                <span>
                  <i></i>
                </span>
                <label>${item.name}</label>
              </li>`;
    });
    typesms.innerHTML = template;

    var list = heroList;
    var listContainer = document.querySelector(".hero-list ul");
    genHero();

    function genHero() {
      template = "";
      list.forEach((item) => {
        template += `<li>
              <a href="javascript:;">
                <img src="./heroimg/${item.ename}.jpg" alt="" />
                <span>${item.cname}</span>
              </a>
            </li>`;
      });
      listContainer.innerHTML = template;
    }

    //
    var poss = document.querySelectorAll(".types-ms li");
    poss[0].querySelector("i").classList.add("active");
    poss.forEach((item, index) => {
      item.onclick = function () {
        document.querySelector(".active").classList.remove("active");
        this.querySelector("i").classList.add("active");
        var type = this.dataset.type;
        if (type == 0) {
          list = heroList;
        } else {
          list = heroList.filter(
            (h) => h.hero_type == type || h.hero_type2 == type
          );
        }

        genHero();
      };
    });

    var search_input = document.querySelector("input[type=search]");
    search_input.oninput = function () {
      document.querySelector(".active").classList.remove("active");
      poss[0].querySelector("i").classList.add("active");

      list = heroList.filter((h) =>
        h.cname.includes(search_input.value.trim())
      );
      genHero();
    };
  </script>
</html>
